<template>

    <h3>12.侦听器</h3>
    <p>{{ message }}</p>
    <button @click="update">修改数据</button>

</template>
<script>

    export default {
        data(){
            return{
                //网页可以侦听到data中的数据变化，并使网页同时发生变化，这类数据被称为响应式数据
                message:'hello'
            }
        },
        //watch对象，用来侦听数据的变化
        watch:{
            //函数名称必须与data中要侦听的数据名相同
            //数据发生变化时会自动执行的函数
            message(newValue, oldValue){
                console.log(newValue, oldValue);
            }
        },
        methods:{
            update(){
                this.message = 'world'
            }
        }
    }

</script>